<template>
  <div style="">
    <Header :left="true" leftText="返回" title="特采申请"> </Header>
    <NoticeBar
      color="#1989fa"
      background="#ecf9ff"
      style="margin-top: 5px; font-size: 15px; font-weight: bold"
      left-icon="description"
      >填报信息</NoticeBar
    >
    <van-form :style="autoHeight" @submit="onSubmit">
      <van-field
        required
        class="formstyle"
        label="特采单描述"
        v-model="form.Description"
        placeholder="输入特采单描述"
      />
      <van-field
        required
        class="formstyle"
        label="物料规格"
        v-model="form.MaterialSpec"
        placeholder="输入物料规格"
      />
      <van-field
        required
        class="formstyle"
        label="特采单数量"
        v-model="form.Amount"
        placeholder="输入特采单数量"
      />
      <van-field
        required
        class="formstyle"
        label="备注信息"
        v-model="form.Memo"
        rows="1"
        autosize
        type="textarea"
        placeholder="输入备注信息"
      />
      <van-field
        required
        class="formstyle"
        label="问题描述"
        v-model="form.Problems"
        rows="1"
        autosize
        type="textarea"
        placeholder="输入问题描述"
      />
      <van-field
        required
        class="formstyle"
        label="部门"
        v-model="form.DepartmentName"
        placeholder="输入部门"
      />

      <van-field
        required
        class="formstyle"
        label="订单号"
        v-model="form.POrderID"
        placeholder="输入订单号"
      />
      <van-field
        required
        class="formstyle"
        label="批次号"
        v-model="form.BatchID"
        placeholder="输入批次号"
      />
      <van-field
        required
        class="formstyle"
        label="物料代码"
        v-model="form.MaterialID"
        placeholder="输入物料代码"
      />
      <van-field
        required
        class="formstyle"
        label="物料描述"
        v-model="form.MaterialName"
        placeholder="输入物料描述"
      />
      <van-field
        required
        class="formstyle"
        label="分析人签名"
        v-model="form.ReasonMan"
        placeholder="输入分析人签名"
      />
      <van-field
          required
          class="formstyle"
          label="原因分析"
          v-model="form.Reasons"
          rows="1"
          autosize
          type="textarea"
          placeholder="输入原因分析"
        />
        <van-field
        required
        class="formstyle"
        label="改善措施"
        v-model="form.Advice"
        rows="1"
        autosize
        type="textarea"
        placeholder="输入改善措施"
        />
       <!-- <van-field
          required
          class="formstyle"
          label="改善措施"
          v-model="form.planworkdatetime"
          placeholder="输入改善措施"
        />-->
      <div style="margin: 16px">
        <van-button
          color="#138087"
          round
          block
          type="info"
          native-type="submit"
          @click="sendSheet()"
          >提交</van-button
        >
      </div>
    </van-form>
  </div>
</template>

<script>
import {
  Col,
  Row,
  Form,
  Cell,
  Icon,
  Field,
  NumberKeyboard,
  Image as VanImage,
  Picker,
  popup,
  SubmitBar,
  Button,
  Loading,
  Overlay,
  Dialog,
  Toast,
  NoticeBar,
  Tag,
  DatetimePicker,
  ImagePreview,
  CellGroup,
  Uploader,
  Cascader,
  Calendar,
  RadioGroup,
  Radio,
  Divider,
  Stepper,
  AddressList,
  Checkbox,
  CheckboxGroup,
} from "vant";

import "vue-easytable/libs/themes-base/index.css";
import { VTable } from "vue-easytable";
import { _httpClient } from "@/libs/apisie";
import { _httpClient as _httpClientApi} from "@/libs/api";
import { getToken, getBaseApiFrefix } from "@/libs/auth";
import Header from "@/components/header.vue";
import { storage } from "@/libs/utils";

Vue.use(Form);
Vue.use(Field);
Vue.use(Overlay);
Vue.use(Loading);
Vue.use(Picker);
Vue.use(popup);
Vue.use(SubmitBar);
Vue.use(VanImage);
Vue.use(DatetimePicker);
Vue.use(Cascader);
Vue.use(Calendar);
Vue.use(Cell);
Vue.use(RadioGroup);
Vue.use(Radio);
Vue.use(Divider);
Vue.use(Stepper);
Vue.use(Button);
Vue.use(AddressList);
Vue.use(Checkbox);
Vue.use(CheckboxGroup);
Vue.use(Col);
Vue.use(Row);

export default {
  name: "QualitySpecialApply",
  components: {
    Form,
    Row,
    Col,
    Button,
    Header,
    Form,
    Cell,
    Icon,
    Field,
    NumberKeyboard,
    Dialog,
    Toast,
    NoticeBar,
    Row,
    Tag,
    popup,
    DatetimePicker,
    ImagePreview,
    CellGroup,
    Uploader,
    Col,
    Calendar,
    Cascader,
    Picker,
    RadioGroup,
    Radio,
    Divider,
    Stepper,
    VTable,
    AddressList,
    Checkbox,
    CheckboxGroup,
  },
  data() {
    return {
      user: [], 
      minDate: new Date(2022, 10, 1),
      maxDate: new Date(2025, 10, 1),
      nowDate: null,
      nowtimer: "",
      form: {
        Description: "",
        MaterialSpec:"",
        Amount:"",
        Memo:"",
        Problems:"",
        DepartmentName:"",
        POrderID:"",
        BatchID:"",
        MaterialID:"",
        MaterialName:"",
        ReasonMan:"",
        Reasons:"",
      },
    };
  },

  created: function () {
    this.user = JSON.parse(storage.get("user"));
    this.user.userId = this.user.userName;
    this.nowtimer = setInterval(this.gettime, 1000);  
    if( api.pageParam.item !== undefined){
      this.item = api.pageParam.item;
      this.form = this.item;
    }
  },
  destroyed(){
    clearInterval(this.nowtimer);        
    this.nowDate = null;
  },
  methods: {
    //提交特采申請
    async sendSheet(){
      let _this = this;
      Toast.loading({
        mask: true,
        forbidClick: true,
        duration: 0,
        message: "请稍等...",
      });
      try {
        let res = await _httpClient.post(
          _httpClient.getApiPrefix() + "/QualitySpecialPurchaseSheet/SaveEntity",
          {
            body: _this.form,
          }
        );
        if(res.Message != null){
          //message不为空,有报错信息，打卡失败 暂时这样判断
          Toast.clear();
          Toast.fail("申请失败,请核对填报信息！");
        }else{
          //打卡成功
          Toast.clear();
          Toast.success("申请成功！");
          this.itemclear();
        }
      } catch (e) {
        Toast.fail(JSON.stringify(e));
      }
    },
    itemclear(){
        this.form.Description = "";
         this.form.MaterialSpec = "";
         this.form.Amount = "";
         this.form.Memo = "";
         this.form.Problems = "";
         this.form.DepartmentName = "";
         this.form.POrderID = "";
         this.form.BatchID = "";
         this.form.MaterialID = "";
         this.form.MaterialName = "";
         this.form.ReasonMan = "";
         this.form.Reasons = "";
    },
  },
};
</script>

<style>
body {
  background-color: white;
}

.table-title-class {
  background-color: #304156;
  color: #fff;
}

.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.buttongroup {
  float: right;
  margin-right: 10px;
  margin-top: 10px;
  margin-bottom: 20px;
}

.container.dwo {
  display: flex;
  justify-content: center;
  align-items: center;
}

.buttonLeft {
  position: fixed;
  bottom: 8px;
  float: left;
  width: 49%;
}

.formstyle {
  margin-top: 8px;
  font-size: 15px;
  font-weight: bold;
  display: flex;
  align-items: center;
}

.radioteam {
  display: flex;
  align-items: center;
  padding-left: 13px;
  margin-top: 10px;
  margin-left: 34px;
  margin-bottom: 10px;
}

.buttonRight {
  position: fixed;
  bottom: 8px;
  float: right;
  left: 51%;
  width: 49%;
  background-color: #f22028;
  border-color: #f22028;
}

.textScroll {
  display: inline-block;
  position: fixed;
  top: 50%;
  bottom: 3rem;
  overflow: scroll;
  right: 10px;
  width: 100%;
  z-index: 1;
}

.message {
  font-size: 15px;
  margin-top: 5px;
  margin-left: -10px;
  font-weight: bold;
}

.mg5 {
  margin-right: 5px;
}

.tag_margin {
  margin: 2px 5px;
}

.card_under {
  height: 100%;
  width: 100%;
  margin: auto;
  background: #ffffff;
  border-radius: 25px;
  box-shadow: 0 0px 0px rgba(0, 0, 0, 0.3);
}

.card_icon {
  text-align: center;
  /* position: absolute; */
  height: 8rem;
  width: 80%;
  margin: 12% 10%;
  background: rgba(35, 180, 237, 1);
  border-radius: 25px;
  box-shadow: 0 10px 50px rgba(0, 0, 0, 0.3);
}

.text {
  font-size: 18px;
  color: #4e4a67;
  margin: 8px auto auto 20px;
  line-height: 1.5rem;
  text-align: justify;
  font-weight: 600;
}

.text_small {
  font-size: 16px;
  color: red;
  margin: 8px auto auto 20px;
  line-height: 1.5rem;
  text-align: justify;
  font-weight: 700;
}

.text_scan {
  font-size: 16px;
  color: #4e4a67;
  margin: auto auto auto 20px;
  line-height: 1.5em;
  text-align: justify;
}

.divStyle {
  margin-left: 3px;
  margin-right: 3px;
}
</style>
